<template>
  <uni-nav-bar title="发放记录" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
  <scroll-view
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: pageHeight + 'px' }"
    v-if="queryList.length > 0"
  >
    <view class="record" v-for="(item, index) in queryList" :key="index">
      <view>
        <text>福利：</text>
        <text>{{ item.welfare_name }}</text>
      </view>
      <view>
        <text>姓名：</text>
        <text>{{ item.driver_name }}</text>
      </view>
      <view>
        <text>参与活动：</text>
        <text>{{ item.activity_name }}</text>
      </view>
      <view>
        <text>发放时间：</text>
        <text>{{ item.createtime }}</text>
      </view>
    </view>
  </scroll-view>
  <view style="height: 80vh" v-if="queryList.length < 1">
    <!-- TODO -->
    <u-empty text="暂无发放记录" mode="list"></u-empty>
  </view>
  <view class="bottom" @click="submit">发放福利</view>
</template>

<script setup lang="ts">
import { giveUser } from '@/gql/welfare';
import { navBack, navTo } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import { onShow } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { onMounted, ref } from 'vue';

// static
const pageHeight = ref('');
const queryList = ref([]);
const userID = uni.getStorageSync('welfareId'); //选择的查询福利人员的ID
// data
let currentPage = 1; //页数
let lastPage = 1; //总页数

onMounted(() => {
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 120).toString();
    },
  });
});

onShow(() => {
  queryList.value = [];
  currentPage = 1;
  grant();
});

/**
 * 获取发放记录
 */
function grant() {
  showLoading('加载中...');
  const pearm = {
    query: giveUser,
    variables: {
      driver_id: userID,
      page: currentPage,
    },
  };
  toPublish('ql/welfare/welfareLog', pearm, (obj: any) => {
    const { welfare_log } = obj.data;
    queryList.value = [...queryList.value, ...welfare_log.list];
    lastPage = welfare_log.lastpage;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage < lastPage) {
    currentPage++;
    grant();
  }
}
/**
 * 跳转到活动列表
 */
function submit() {
  navTo('welfare/activity');
}
</script>

<style lang="less">
.record {
  width: 95%;
  margin: 2.5%;
  background-color: white;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 5px;
  view {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 55rpx;
    text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    text:nth-of-type(2) {
      width: 70%;
      text-align: right;
    }
  }
}
.bottom {
  width: 310rpx;
  margin: 20rpx auto;
  height: 88rpx;
  background: #1697ff;
  border-radius: 5px;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fffefe;
  text-align: center;
  line-height: 88rpx;
}
</style>
